<h4>默认图标 - 正常/禁用/旋转</h4>
<d-icon [icon]="'icon-setting'"></d-icon>
<d-icon [icon]="'icon-setting'" [disabled]="true"></d-icon>
<d-icon [icon]="'icon-refresh'" [rotate]="'infinite'"></d-icon>

<h4>彩色图标</h4>
<d-icon [icon]="'icon-star'" [color]="'var(--devui-warning)'"></d-icon>

<h4>可交互默认图标 - 正常/禁用/旋转</h4>
<d-icon [icon]="'icon-setting'" [operable]="true"></d-icon>
<d-icon [icon]="'icon-setting'" [operable]="true" [disabled]="true"></d-icon>
<d-icon [icon]="'icon-refresh'" [operable]="true" [rotate]="'infinite'"></d-icon>

<h4>链接图标</h4>
<d-icon icon="icon-helping" dIconLink>
  <a iconSuffix class="devui-link" href="/components/zh-cn/icon/api">如何使用Icon</a>
</d-icon>

<h4>文字图标 - 文字后置</h4>
<d-icon [icon]="'icon-setting'" [operable]="true">
  <span iconSuffix>设置</span>
</d-icon>

<h4>文字图标 - 文字前置</h4>
<d-icon [icon]="'icon-setting'" [operable]="true">
  <span iconPrefix>设置</span>
</d-icon>

<h4>文字图标 - 自定义图标</h4>
<d-icon [icon]="customTemplate" [operable]="true">
  <span iconSuffix>添加</span>
</d-icon>

<h4>文字图标 - 禁用</h4>
<d-icon [icon]="'icon-edit'" [disabled]="true">
  <span iconSuffix>无权编辑</span>
</d-icon>

<h4>文字图标 - 图标变色,常用于文字表单场景</h4>
<d-icon [icon]="'icon-edit'" dIconHover>
  <span iconPrefix>暂无描述</span>
</d-icon>

<h4>文字图标 - 旋转</h4>
<d-icon [icon]="'icon-refresh'" [rotate]="'infinite'">
  <span iconSuffix>运行中</span>
</d-icon>
<d-icon [icon]="'icon-refresh'" [operable]="true" [rotate]="'infinite'">
  <span iconSuffix>下载中</span>
</d-icon>

<ng-template #customTemplate>
  <svg
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g id="操作/add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <path
        d="M8,0.5 C12.1421356,0.5 15.5,3.85786438 15.5,8 C15.5,12.1421356 12.1421356,15.5 8,15.5 C3.85786438,15.5 0.5,12.1421356 0.5,8 C0.5,3.85786438 3.85786438,0.5 8,0.5 Z M8,2.5 C4.96243388,2.5 2.5,4.96243388 2.5,8 C2.5,11.0375661 4.96243388,13.5 8,13.5 C11.0375661,13.5 13.5,11.0375661 13.5,8 C13.5,4.96243388 11.0375661,2.5 8,2.5 Z M9,5 L9,7 L11,7 L11,9 L9,9 L9,11 L7,11 L7,9 L5,9 L5,7 L7,7 L7,5 L9,5 Z"
        id="形状"
        fill="#71757f"
      ></path>
    </g>
  </svg>
</ng-template>
